<template>
   <div
      id="table-wrapper"
      ref="refWrapper">
      <el-table
         ref="refTable"
         :data="getPageData(tableData)"
         stripe
         class="middle wrapper"
         style="width: 100%"
         :default-sort="{ prop: 'date', order: 'ascending' }"
         @selection-change="handleSelectionChange">
         <!-- 多选显示栏 -->
         <el-table-column
            type="selection"
            width="40" />

         <!-- fixed固定 sortable字段可排序 label=当前列标题 width当前列像素宽度 -->
         <!-- <el-table-column
			sortable
			fixed
			:prop="fixedCol.prop"
			:label="fixedCol.lable"
			width="100" /> -->

         <!-- 列 -->
         <el-table-column
            v-for="{ prop, label, fixed, width, formatter, hasSlot, nosort } in cols"
            :sortable="nosort ? false : true"
            :fixed="fixed"
            :prop="prop"
            :label="label"
            :width="width ? width : avgColWidth ? avgColWidth : defColWidth"
            :formatter="formatter">
            <template
               v-if="hasSlot"
               #default="{ row }">
               <slot
                  :name="prop"
                  :row="row"></slot>
            </template>
         </el-table-column>

         <!-- 海报 -->
         <!-- <el-table-column
			prop="poster"
			label="海报"
			width="60">
			<template #default="{ row: { poster } }">
				<div style="display: flex; align-items: center">
					<el-image :src="poster" />
				</div>
			</template>
		</el-table-column> -->

         <!-- 右侧固定的操作按钮区 -->
         <el-table-column
            fixed="right"
            label="操作"
            width="90">
            <!-- action按钮区作用域插槽提供的数据中含有当前行信息row -->
            <!-- <template #default="scope"> -->

            <!-- 可以通过简单的测试查看一下作用域插槽中携带的数据 -->
            <!-- <el-button @click="showScope(scrope)"/> -->

            <!-- 从作用域插槽数据中解构出当前行id -->
            <template #default="{ row: { _id } }">
               <!-- 点击Edit按钮 携带id跳转详情页 -->
               <el-button
                  @click="$router.push(`/film/${_id}`)"
                  type="primary"
                  :icon="Edit"
                  circle
                  size="small" />

               <!-- 触发单个影片删除 -->
               <el-button
                  @click="deleteItem(_id)"
                  type="danger"
                  :icon="Delete"
                  circle
                  size="small" />
            </template>
         </el-table-column>
      </el-table>
   </div>

   <div class="card bottom">
      <el-pagination
         background
         layout="prev, pager, next"
         :page-size="pageSize"
         :total="tableData.length"
         v-model:current-page="currentPage" />
   </div>
</template>

<script setup lang="ts">
import { /* nextTick, computed, */ ref, onMounted, defineExpose } from "vue";
import { Delete, Edit } from "@element-plus/icons-vue";
import { ElTable, ElMessage } from "element-plus";
// import { deleteComing } from "@api/movieApi";
// import EpDialog from "./EpDialog.vue";

const { tableData, pageSize, fixedCol, cols, avgColWidth } = defineProps({
   tableData: {
      type: Array,
      required: true,
   },
   pageSize: {
      type: Number,
      required: true,
   },
   fixedCol: Object,
   cols: Array<EpDialogCol>,
   avgColWidth: Number,
});

const emit = defineEmits({
   deleteItem: id => /^[a-z\d]{24}$/.test(id),
   patchDelete: null,
});

/* 1.0 */
// const emit = defineEmits({
// 	pageChange: null,
// });

/* 多选时此处能拿到选中的子数组 */
const selectedItems = ref([]);
const getSelectedItems = () => selectedItems.value;

const handleSelectionChange = val => {
   console.log("handleSelectionChange", val);
   selectedItems.value = val;
};

/* 获取分页数据 */
const currentPage = ref(1);
const getPageData = arr => {
   console.log("getPageData,arr=", arr);
   console.log("getPageData,tableData=", tableData);
   return arr.slice((currentPage.value - 1) * pageSize, currentPage.value * pageSize);
};

/* 默认列宽 */
const refWrapper = ref<HTMLElement | null>(null);
const defColWidth = ref(100);
onMounted(() => {
   console.log("refTable.value=", (refWrapper.value as HTMLElement).clientWidth);
   defColWidth.value = Math.round((refWrapper.value as HTMLElement).clientWidth / 4);
});

/* 删除单个 */
const deleteItem = id => {
   emit("deleteItem", id);
};

defineExpose({
   getSelectedItems,
});
</script>

<style lang="scss" scoped>
.card {
   padding: 10px;
   background-color: white;
   border-radius: 5px;
}

.middle {
   margin: 10px 0;
}

.bottom {
   padding: 5px;
}

.wrapper {
   width: 100%;
}
</style>
